<template>
  <view class="page-container">
    <view class="header">
      <text class="title">加法计算器</text>
      <text class="subtitle">简单易用的加法工具</text>
    </view>
    
    <view class="calculator-wrapper">
      <Calculator 
        :operations="['add']" 
        @result="handleResult" 
      />
    </view>
    
    <view v-if="showResult" class="result-container">
      <view class="result-card">
        <text class="result-title">计算结果</text>
        <text class="result-content">
          {{ calcData.num1 }} + {{ calcData.num2 }} = 
          <text class="highlight">{{ calcData.result }}</text>
        </text>
      </view>
      
      <view class="history" v-if="history.length > 0">
        <text class="history-title">历史记录</text>
        <view class="history-item" v-for="(item, index) in history" :key="index">
          {{ item.num1 }} + {{ item.num2 }} = {{ item.result }}
        </view>
      </view>
    </view>
    
    <view class="nav-buttons">
      <button @click="goToPage('multiply')" class="nav-btn multiply">去乘法页面</button>
      <button @click="goToPage('divide')" class="nav-btn divide">去除法页面</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Calculator from '@/components/Calculator.vue';

const showResult = ref(false);
const calcData = ref({});
const history = ref([]);

const handleResult = (data) => {
  calcData.value = data;
  showResult.value = true;
  
  // 添加到历史记录（只保留最近5条）
  history.value.unshift({
    num1: data.num1,
    num2: data.num2,
    result: data.result
  });
  
  if (history.value.length > 5) {
    history.value.pop();
  }
};

const goToPage = (page) => {
  uni.navigateTo({
    url: `/pages/${page}/${page}`
  });
};
</script>

<style scoped>
.page-container {
  padding: 40rpx;
  background: linear-gradient(to bottom, #f5f7fa, #e4e7eb);
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
}

.subtitle {
  font-size: 32rpx;
  color: #7f8c8d;
  display: block;
  margin-top: 10rpx;
}

.calculator-wrapper {
  background: white;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.08);
}

.result-container {
  margin-top: 50rpx;
  animation: fadeIn 0.5s;
}

.result-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.08);
  margin-bottom: 30rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 20rpx;
}

.result-content {
  font-size: 42rpx;
  color: #34495e;
}

.highlight {
  color: #e74c3c;
  font-weight: bold;
  font-size: 48rpx;
}

.history {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.08);
}

.history-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 20rpx;
}

.history-item {
  font-size: 32rpx;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eee;
  color: #7f8c8d;
}

.history-item:last-child {
  border-bottom: none;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
}

.nav-btn {
  flex: 1;
  margin: 0 15rpx;
  height: 90rpx;
  border-radius: 12rpx;
  color: white;
  font-size: 32rpx;
}

.nav-btn.multiply {
  background: linear-gradient(135deg, #e74c3c, #e67e22);
}

.nav-btn.divide {
  background: linear-gradient(135deg, #9b59b6, #34495e);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>